<template>
	<div class="shortvideo">
		<div class="short-videos-list" v-if="videolist.length>0">
			<a v-for="item in videolist" :key="item.id" @click="path(item)">
				<div class="short-video-item" :style="{'background-image':'url('+item.shareInfo.img+')'}">
					<div class="title">{{item.title}}</div>
					<div class="video-info">
						<img :src="item.user.avatarurl" class="img user-avatar" width="21.5" height="21.5">
						<div class="user-name">{{item.user.nickName}}</div>
						<img src="../assets/img/5377c2c03dacf20b6e286e3e72dd57911272.png" class="img like-icon"
							width="18" height="18">
						<div class="like-count">{{item.upCount}}</div>
					</div>
				</div>
			</a>
		</div>

		<div class="more" @click="showMore()" v-if="videolist.length>0">
			<div class="loader-wrap">
				<span>{{this.offset >=100? "已经到底了":"加载更多"}}</span>
			</div>
		</div>

		<van-loading size="24px" v-else class="loading">加载中...</van-loading>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				videolist: [],
				offset: 0
			}
		},
		created() {
			this.getVideo()
		},
		mounted() {

		},
		methods: {
			async getVideo() {
				let re = await this.axios.get('video/short/' + this.offset)
				// console.log(re)
				re.feeds.forEach(item => {
					this.videolist.push(item)
				})
				// console.log(this.videolist)
			},

			path(item) {
				this.$store.commit("SmallvideoObj",item)
				this.$router.push("/player")
			},
			showMore() {
				if (this.offset >= 100) {
					return
				}
				this.offset += 10;
				this.getVideo()
			},
		}
	}
</script>

<style scoped lang="less">
	.shortvideo {
		margin-top: 50px;
		margin-bottom: 48px;
		position: relative;

		.short-videos-list {
			position: relative;
			font-size: 0;
		}

		a {
			display: inline;
		}

		.loading {
			position: absolute;
			top: 200px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.short-video-item {
		position: relative;
		display: inline-block;
		width: 49.5%;
		height: 300px;
		margin: 0 .5% 2px 0;
		background-position: 50%;
		background-size: cover;

		.title {
			width: 170px;
			margin: 8px;
			position: absolute;
			color: #fff;
			font-size: 15px;
			line-height: 21px;
			bottom: 41px;
			text-shadow: 0 0 3px rgb(0 0 0 / 30%);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.video-info {
			display: flex;
			align-items: center;
			bottom: 14px;
			font-size: 13px;
			width: 170px;
			margin: 0 8px;
			position: absolute;
			color: #fff;

			img.user-avatar {
				opacity: .9;
				border: 0 solid rgba(42, 42, 42, .05);
				border-radius: 10px;
				width: 21.5px;
				height: 21.5px;
			}

			.user-name {
				margin: 0 6px;
				flex: 1;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.like-icon {
				display: inline-block;
				width: 18px;
				height: 18px;
				margin-right: 3px;
				background-color: transparent;
			}

			.like-count {
				width: 34px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.more {
		line-height: 40px;
		height: 40px;
		text-align: center;
	}

	.loader-wrap {
		text-align: center;
		line-height: 40px;
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/下载.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
